Reactstrap — Buttons

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add buttons with Reactstrap.

Buttons

Reactstrap comes with its own button component.

To add it, we use the Button component:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" className="mr-2">
        primary
      </Button>
      <Button color="secondary" className="mr-2">
        secondary
      </Button>
      <Button color="success" className="mr-2">
        success
      </Button>
      <Button color="info" className="mr-2">
        info
      </Button>
      <Button color="warning" className="mr-2">
        warning
      </Button>
      <Button color="danger" className="mr-2">
        danger
      </Button>
      <Button color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

We add the Button component with the color prop to change the color of the button.

The mr-2 class adds some right margins.

Outline Buttons

Buttons can also have outline styles.

To add them, we add the outline prop:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button outline color="primary" className="mr-2">
        primary
      </Button>
      <Button outline color="secondary" className="mr-2">
        secondary
      </Button>
      <Button outline color="success" className="mr-2">
        success
      </Button>
      <Button outline color="info" className="mr-2">
        info
      </Button>
      <Button outline color="warning" className="mr-2">
        warning
      </Button>
      <Button outline color="danger" className="mr-2">
        danger
      </Button>
      <Button outline color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

Sizes

We can add the size prop to change the size.

lg makes it big and sm makes it small.

We can add that by writing:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg">
        Large Button
      </Button>
      <Button color="primary" size="sm">
        Small Button
      </Button>
    </>
  );
}

We added a large and small button with the size prop.

To make the button a block element, we can use the block prop:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" block>
        Large Button
      </Button>
    </>
  );
}

This will then span the whole row.

Active State

To make a button show the active state, we can add the active prop.

For example, we can write:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" active>
        Large Button
      </Button>
    </>
  );
}

The active state will be darker than the non-active state.

Disabled State

We can disable a button with the disabled prop.

For example, we can write:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" disabled>
        Large Button
      </Button>
    </>
  );
}

Checkbox and Radio Buttons

We can make radio buttons out of Button components.

To do that, we put them in a button group.

For instance, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [rSelected, setRSelected] = React.useState(null);

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => setRSelected(1)}
          active={rSelected === 1}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(2)}
          active={rSelected === 2}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(3)}
          active={rSelected === 3}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have a ButtonGroup to group all the buttons together.

Then we have the onClick prop for each button to set the rSelected state.

The active prop let us set the condition for it to be active.

We can also use buttons as checkbox buttons.

For example, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [cSelected, setCSelected] = React.useState([]);

  const onCheckboxBtnClick = selected => {
    const index = cSelected.indexOf(selected);
    if (index < 0) {
      cSelected.push(selected);
    } else {
      cSelected.splice(index, 1);
    }
    setCSelected([...cSelected]);
  };

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(1)}
          active={cSelected.includes(1)}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(2)}
          active={cSelected.includes(2)}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(3)}
          active={cSelected.includes(3)}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have the onCheckboxBtnClick function that runs to remove the selection if it already exists.

Otherwise, it adds it to the cSelected array.

The active prop’s condition now checks if the selection is in the cSelected array instead of checking for equality.

This is because checkboxes can save multiple choices.

Conclusion

Buttons have many uses. They can be used individually or as checkboxes or radio buttons.